<template>
  <DraggableModal
    :visible="props.showModal"
    title="审批单详情"
    width="900px"
    :maskClosable="false"
    @cancel="modalCancelFn"
  >
    <div id="print-area">
      <vxe-table
        ref="tableRef"
        border
        align="center"
        style="width: 100%; overflow-y: visible"
        :data="state.tableData"
        :loading="state.loading"
        :export-config="{}"
      >
        <vxe-colgroup title="危险材料运出BSL-3实验室申请清单">
          <vxe-column type="seq" width="60" title="序号" />
          <vxe-column field="name" title="危险材料名称" />
          <vxe-column field="originalSerial" title="编号" />
          <vxe-column field="dangerLevel" title="危害程度分类" />
          <vxe-column field="dangerType" title="危险材料性质" />
          <vxe-column field="usage" title="运出实验室用途" />
          <vxe-column field="couriers" title="运出人员" />
          <vxe-column field="destination" title="目的地" />
          <vxe-column field="checker" title="复核人" />
          <vxe-column field="comment" title="备注" />
        </vxe-colgroup>
      </vxe-table>
      <div class="qianming">
        <p>
          <span class="box"
            >申&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人</span
          >
          <span class="xian"></span>
        </p>
        <p><span class="box">实验室负责人</span> <span class="xian"></span></p>
        <p><span class="box">实验室管理处</span> <span class="xian"></span></p>
        <p><span class="box">保藏中心主任</span> <span class="xian"></span></p>
        <p>
          <span class="box">申&nbsp;&nbsp;请&nbsp;&nbsp;&nbsp;时&nbsp;&nbsp;间</span>
          <span class="xian"></span>
        </p>
      </div>
    </div>

    <template #footer>
      <Popconfirm title="是否确认导出？" @confirm="exportExcelFn">
        <Button type="primary">Excel导出</Button>
      </Popconfirm>
      <a-button type="primary" @click="printFn">打印</a-button>
    </template>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { getApprovalDetails } from '@/modules/share-management/api/approval-order-records';
import { reactive, watch, ref } from 'vue';
import { Button, Popconfirm } from 'ant-design-vue';
import Print from 'print-js';

export type State = {
  tableData: any;
  loading: boolean;
};

const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.showModal,
  () => {
    if (props.showModal) {
      getApprovalDetailsFn();
    }
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
}>();

/**
 * data
 */
const tableRef = ref();
const state: State = reactive({ tableData: [{ name: '' }], loading: false }) as State;

/**
 * fn
 */
const getApprovalDetailsFn = async () => {
  state.loading = true;
  let params = { id: props.data.id, pageNum: '1', pageSize: '99999' };
  let res = await getApprovalDetails(params);
  state.tableData = res?.result?.collect2strains?.data;
  state.loading = false;
};
const printFn = () => {
  Print({
    printable: 'print-area',
    type: 'html',
    documentTitle: '感染性材料可追溯性智能管理系统',
    header: '危险材料运出BSL-3实验室申请清单',
    headerStyle: 'font-weight:400;text-align:center;margin:50px 0',
    maxWidth: 1500,
    targetStyles: ['*'], // 允许打印所有样式属性
  });
};
const exportExcelFn = () => {
  tableRef.value?.openExport();
};
/**
 * modal
 */
const modalCancelFn = () => {
  emits('update:showModal', false);
};
</script>

<style scoped lang="less">
.qianming {
  font-size: 16px;
  margin-top: 50px;
  text-align: center;

  p {
    margin-top: 10px;
  }

  .box {
    display: inline-block;
    text-align: center;
    width: 130px;
    padding: 0;
    border: 0;
  }

  .xian {
    display: inline-block;
    border: 0.5px solid #ccc;
    width: 200px;
    height: 0;
    margin-left: 20px;
  }
}
</style>
